<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
       <style>
        div {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
     <div id="d"></div>
    <h2 class="hh">你好</h2>
</body>
   
    <script>
        /*
            事件监听
             1. 事件源  DOM操作，标签对象
             2. 事件类型 鼠标点击事件、滑过事件、键盘事件等
             3. 触发事件后，做什么
        */

        // 需求1：给div添加点击事件，点击后变成绿色的圆形
        // 获取标签对象
        // let d = document.getElementById("d")
        let d = document.querySelector("#d")
        // 给div标签绑定点击事件  标签对象.事件 = function(){}
        d.onclick = function () {
            // 触发后，变成绿色且圆形
            d.style.backgroundColor = "lightseagreen"
            d.style.borderRadius = "50%"
        }

        // 需求2：给h2标签添加鼠标滑过事件，改变文本的颜色及文本文字
        let h = document.getElementsByClassName("hh")[0]//因为可能有很多类名是hh的，所以要加个下标
        h.onmouseover = function () {
            // h.style.color = "red"
            // 替换普通文本
            // h.innerText = "我不好"
            // 替换HTML文本
            h.innerHTML = "<span style='color:green'>我不好</span>"
        }
    </script>
</html>